<template>
    <div class="data-center-main" ref="dataCenter" id='terminal'>
        <div class="container">
            <div style="padding-top: 15px;padding-left: 15px">
                <div style="display: flex;align-items: center;">
                    <el-form ref="searchForm" :model="searchForm" inline>
                        <!-- <el-form-item label="资产编号:" >
            <el-col :span="6">
              <el-input v-model="searchForm.assetCode" clearable style="width:350px;"></el-input>
            </el-col>
          </el-form-item> -->
                        <el-form-item label="关键词">
                            <el-col :span="6">
                                <el-input v-model="searchForm.text" clearable style="width:200px;"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="详细地址">
                            <el-col :span="6">
                                <el-input v-model="searchForm.addressss" clearable style="width:200px;"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="省份" prop="provinceValue">
                            <el-select v-model="searchForm.provinceValue" filterable clearable
                                @change="provinceQueryChange" placeholder="请选择省份">
                                <el-option v-for="item in provinceList" :key="item.value" :label="item.text"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="市" prop="cityValue">
                            <el-select v-model="searchForm.cityValue" filterable clearable @change="cityQueryChange"
                                placeholder="请选择市">
                                <el-option v-for="item in cityList" :key="item.value" :label="item.text"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="区县" prop="regionValue">
                            <el-select v-model="searchForm.regionValue" filterable clearable
                                @change="regionQueryChange" placeholder="请选择市">
                                <el-option v-for="item in regionList" :key="item.value" :label="item.text"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="渠道">
                            <el-col :span="6">
                                <el-input v-model="searchForm.channel" clearable style="width:200px;"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="直属组织">
                            <el-col :span="6">
                                <el-input v-model="searchForm.text" clearable style="width:200px;"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="管理员">
                            <el-col :span="6">
                                <el-input v-model="searchForm.text" clearable style="width:200px;"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                style="margin-left:5px;background:#5B6BF4;font-family:'HarmonyOS_Sans_SC_Regular';border:none"
                                type="primary" icon="el-icon-search" size="mini" @click="queryByForm">检索</el-button>
                            <el-button style="font-family:'HarmonyOS_Sans_SC_Regular'" size="mini"
                                @click="batchImportOpen = true">批量新增/导入</el-button>
                        </el-form-item>
                        <!-- <el-form-item>
          <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="importAssetcode"
          >导入资产编号 (Excel)</el-button
          >
        </el-form-item> -->

                        <!-- <el-form-item>
                            <ExportExcel :list="exportList" :tHeader="tHeader" :tValue="tValue" filename="排面陈列"
                                buttonName="数据导出"></ExportExcel>
                        </el-form-item> -->


                    </el-form>
                </div>
                <div style="display: flex;margin-top: 20px;margin-bottom: 20px;">
                    <el-button type="primary"
                        style="background:#5B6BF4;font-family:'HarmonyOS_Sans_SC_Regular';border:none"
                        @click="handleAdd">新增</el-button>
                    <!-- <el-button style="font-family:'HarmonyOS_Sans_SC_Regular'" @click="adjustOpen = true">导出</el-button>
                    <el-button style="font-family:'HarmonyOS_Sans_SC_Regular'">删除</el-button> -->
                </div>
                <div style="height: 640px">
                    <el-table :data="list" v-loading="loading" height="620">
                        <el-table-column type="selection" width="55" align="center">
                        </el-table-column>
                        <el-table-column prop="id" label="序号" align="center">
                        </el-table-column>
                        <el-table-column prop="skuId" label="所属渠道" align="center">
                        </el-table-column>
                        <el-table-column prop="skuName" label="终端编号" width="300" align="center">
                        </el-table-column>
                        <el-table-column prop="pic" label="终端名称" align="center">
                            <template slot-scope="scope">
                                <img :src="scope.row.imageUrl" alt="" height="50" />
                            </template>

                        </el-table-column>
                        <el-table-column prop="attribute" label="终端地址" align="center">
                        </el-table-column>
                        <el-table-column prop="brand" label="店主姓名" align="center">
                        </el-table-column>
                        <el-table-column prop="classify" label="店主电话" align="center">
                        </el-table-column>
                        <el-table-column prop="createTime" label="管理人员" align="center">
                        </el-table-column>
                        <el-table-column prop="createTime" label="新增时间" align="center">
                        </el-table-column>
                        <el-table-column prop="createTime" label="操作员" align="center">
                        </el-table-column>
                        <el-table-column prop="createTime" label="状态" align="center">
                        </el-table-column>
                        <el-table-column prop="createTime" label="等级" align="center">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" icon="el-icon-edit"
                                    @click="handleEdit(scope.row)">修改</el-button>
                                <el-button size="mini" type="text" icon="el-icon-delete" style="color: red;"
                                    @click="handleDel(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                        @pagination="pagination" />
                </div>

                <!-- <div class="page">
                    <div style="margin-right: 20px;color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">共7条</div>
                    <el-button type="text" style="color:#333;margin-right: 10px;">
                        <</el-button>
                            <div class="pageborder">1</div>
                            <el-button type="text" style="color:#333;margin-right: 10px;">></el-button>
                            <div style="margin-right: 10px;color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">前往</div>
                            <el-input type="number" style="width: 60px;margin-right: 10px;" :min="0"
                                v-model="pageIndex" />
                            <div style="color: #333;font-family:'HarmonyOS_Sans_SC_Regular'">页</div>
                </div> -->
                <!-- 解绑提示框 -->
                <el-dialog title="解绑算法" :visible.sync="deleteVisible" width="30%">
                    <span>是否删除？</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="deleteVisible = false">取 消</el-button>
                        <el-button type="primary" @click="deleteSKU">确 定</el-button>
                    </span>
                </el-dialog>
                <!-- 批量导入 -->
                <el-dialog :visible.sync="batchImportOpen" width="800px" append-to-body :show-close="false">

                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="批量导入" name="first">
                            <el-timeline>
                                <el-timeline-item timestamp="下载模板" placement="top">
                                    <div class="download">
                                        <span
                                            style="font-family:'HarmonyOS_Sans_SC_Regular';color:#777">请下载模板，按照模板格式要求编辑后上传，完成导入</span>
                                        <el-button size="mini" type="text" icon="el-icon-download"
                                            style="color: #5B6BF4;font-family:'HarmonyOS_Sans_SC_Regular';">下载模板</el-button>
                                    </div>
                                </el-timeline-item>
                                <el-timeline-item timestamp="上传文件" placement="top">
                                    <div
                                        style="display:flex;align-items: center;;width:100%;height:100%;flex-direction:column">
                                        <el-upload action="https://jsonplaceholder.typicode.com/posts/"
                                            list-type="picture-card">
                                            <!-- :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> -->
                                            <img src="../../../../assets/images/file.png" style="width: 50px;" />
                                            <!-- <i class="el-icon-plus"></i> -->
                                        </el-upload>
                                        <el-button type="primary"
                                            style="background:#5B6BF4;font-family:'HarmonyOS_Sans_SC_Regular';border:none;margin-top:10px;width:148px">上传文件</el-button>
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="批量跟新" name="second">批量跟新</el-tab-pane> -->
                    </el-tabs>
                    <div style="display: flex;justify-content: space-between;align-items: center">
                        <div style="font-family:'HarmonyOS_Sans_SC_Regular';color:#777"></div>
                        <div>
                            <el-button style="font-family:'HarmonyOS_Sans_SC_Regular'"
                                @click="batchImportOpen = false">取消</el-button>
                            <el-button type="primary"
                                style="background:#5B6BF4;font-family:'HarmonyOS_Sans_SC_Regular';border:none">开始导入</el-button>
                        </div>
                    </div>
                </el-dialog>
                <!-- 批量导入 -->
                <el-dialog :visible.sync="analyzeOpen" width="800px" append-to-body :show-close="false">
                    <div class="diabox">
                        <span class="charttitle">本品：{{ benpNum }}</span>
                        <div id="chart1"></div>
                        <span class="charttitle">本品：{{ benpNum }}</span>
                        <div id="chart2"></div>
                    </div>
                </el-dialog>

                <!-- 以下为弹框相关 -->
                <el-dialog :title="dialogTitle" :visible.sync="dialogOpen" @close="cancel" width="800px" append-to-body>
                    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="SKU编号" prop="skuId">
                                    <el-input v-model="form.skuId" placeholder="请输入" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="SKU名称" prop="skuName">
                                    <el-input v-model="form.skuName" placeholder="请输入" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="用户商户" prop="userId">
                                    <el-select v-model="form.userId" filterable placeholder="请选择"
                                        @change="oneLevelUserChange()" :disabled="FormOneLevel">
                                        <el-option v-for="item in initCustomer" :key="item.id" :label="item.nickname"
                                            :value="item.id">
                                        </el-option>
                                    </el-select>
                                    <!-- <el-input v-model="form.userId" placeholder="请输入" /> -->
                                </el-form-item>
                            </el-col>

                            <!-- 二级用户 -->
                            <el-col :span="12">
                                <el-form-item label="一级经销商" prop="twoUserId">
                                    <!-- <el-input v-model="form.userid" placeholder="请输入" /> -->
                                    <el-select v-model="form.twoUserId" filterable clearable placeholder="请选择"
                                        @change="twoLevelUserChange()" :disabled="FormTwoLevel">
                                        <el-option v-for="item in twoLevelUserList" :key="item.id"
                                            :label="item.nickname" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <!-- 三级用户 -->
                            <el-col :span="12">
                                <el-form-item label="二级经销商" prop="threeUserId">
                                    <!-- <el-input v-model="form.userid" placeholder="请输入" /> -->
                                    <el-select v-model="form.threeUserId" filterable clearable placeholder="请选择"
                                        :disabled="FormThreeLevel">
                                        <el-option v-for="item in threeLevelUserList" :key="item.id"
                                            :label="item.nickname" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="SKU品类" prop="classify">
                                    <el-radio-group v-model="form.classify">
                                        <el-radio :label="0">本品</el-radio>
                                        <el-radio :label="1">竞品</el-radio>
                                        <el-radio :label="2">他品</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>

                            <el-col :span="12" v-if="form.classify === 0">
                                <el-form-item label="是否为必铺品" prop="biPuPin">
                                    <el-radio-group v-model="form.biPuPin">
                                        <el-radio :label="true">是</el-radio>
                                        <el-radio :label="false">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>


                            <el-col :span="24">
                                <el-form-item label="SKU图片" prop="file">
                                    <input type="file" ref="file" @change="handFileChange" />
                                    <img style="width: 100px" :src="skuImgUrl" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
// import {
//     addSKUV2,
//     modifySKUV2,
//     modifySKUV2NoFile,
//     addSKU,
//     delSKU,
//     modifySKU,
//     getUserSKUList,
//     getSKULibList,
//     bindSKU,
// } from '@/api/goods/SKU'
// import { userListSon, getDadInfoByUserId } from '@/api/user'

// import { intRole } from '@/utils/formValidate'
// import { getToken } from '@/utils/auth'
// import {
//     algBindV4,
//     getAlgListV4,
//     algUnBindV4,
// }
//     from '@/api/algorithm/algorithm'


// import AllAddress from '@/plugins/data.js'



export default {
    name:'Terminal',
    components: {

    },
    data() {
        return {
            isAdmin: false,
            skuNameList: [],
            layerList: [
                {
                    name: '顶层库',
                    id: 1
                },
                {
                    name: '中间层库',
                    id: 2
                },
                {
                    name: '底层库',
                    id: 3
                },
            ],
            FormOneLevel: false,
            FormTwoLevel: false,
            FormThreeLevel: false,
            twoLevelUserList: [],// 新增/修改框二级用户列表
            threeLevelUserList: [],// 新增/修改框二级用户列表
            twoLevelUserListSearch: [],//  检索二级用户列表
            threeLevelUserListSearch: [],//  检索三级用户列表
            isLevelThree: true,
            showOneLevel: false,
            showTwoLevel: true,
            showThreeLevel: true,
            skuImgUrl: '',//图片url
            bingdingList: '',//搜索框
            classify: '',
            biPuPin: '',
            initCustomer: [],
            showText: '选择绑定sku:-',
            bindLoading: false,
            alogPagn: {
                total: 0,
                pageNum: 1,
                pageSize: 20,
            }, // 分页数据
            chooseValue: '', // 绑定单选框
            alogData: [], // 算法表格数据
            searData: [], //算法表格-搜索框数据
            provinceList: [],
            cityList: [],
            regionList: [],
            bindVisible: false, // 绑定算法sku
            deleteVisible: false, // 删除提示

            uploadData: {
                userId: this.$store.state.user.id,
            },
            uploadFileUrl: process.env.VUE_APP_BASE_API + '/sku/upload/', // 上传文件服务器地址
            // 遮罩层
            loading: false,
            pushloading: false,
            // 总条数
            total: 0,
            // 表格数据
            list: [],
            pageNum: 1,
            pageSize: 10,
            // 查询参数
            searchForm: {
                skuName: '',
                userId: '',
                twoUserId: '',
                threeUserId: '',
            },
            fileSize: 5,
            dialogOpen: false,
            dialogTitle: '新增SKU',
            rules: {
                skuId: [{ required: true, message: '不能为空', trigger: 'blur' }
                    // {
                    //   pattern: /^(0|[1-9][0-9]*)$/,
                    //   message: "请输入数字",
                    //   trigger: "blur"
                    // }
                ],
                skuName: [{ required: true, message: '不能为空', trigger: 'blur' }],
                // userId: [
                //     { required: true, message: '不能为空', trigger: 'blur' },
                //     { validator: intRole, trigger: 'change' },
                // ],
                skuImgUrl: [{ required: true, message: '请添加图片' }],
            },
            form: {
                skuId: '', //	string allowEmptyValue: false 商品唯一标识，不可修改
                skuName: '', //	string allowEmptyValue: false 商品名称
                userId: '', //integer($int64) allowEmptyValue: false 请先选择要添加的商户：用户的数据表ID
                twoUserId: '',//二级用户
                threeUserId: '',//三级用户
                file: '',
                classify: 0, //产品品类 0本品 1竞品 2他品
                biPuPin: true,//默认不是必铺品 true是 false不是
                id: '',//选中行的id
            },
            searchingForm: {
                layer: '',
                skuId: '',
                skuName: ''
            },
            editRow: null, //修改行
            batchImportOpen: false,
            activeName: 'first',
            analyzeOpen: false,
            benpNum: 253,
            jinpNum: 123,
            pageIndex: 1,
            list: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            dialogTitle: '',
            doalogOpen: '',
            // searchForm: {
            //     text: '',//设备编号 或 资产编号
            //     dateTime: '',
            //     startDate: '',//开始日期,格式: 2023-02-20
            //     endDate: '', //结束日期,格式: 2023-02-20
            //     dimension: 1 // 时间维度（日/周/月/季度）日：1，周：2，月：3，季度:4
            // },
            Benpopt: {
                color: '#6474FF',
                // title: {
                //     text: '渠道分布',
                //     textStyle: {
                //         fontFamily: 'HarmonyOS_Sans_SC_Medium',
                //         fontSize: 18,
                //         color: '#333333',
                //         fontWeight: 'normal'
                //     }
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                // label: {
                //     show: true,
                //     position: 'top'
                // },
                // legend: { y: 'bottom', data: ['销量', '牌面位', '卖力'] },
                grid: {
                    left: '10%',
                    right: '0%',
                    bottom: '13%',
                    top: '20%'
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['汽水', '水类', '奶类', '功能', '果汁'],
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#8C8C8C',  //坐标轴的颜色
                        },
                    },
                    axisLabel: {//x轴文字的配置
                        show: true,
                        textStyle: {
                            color: "#8C8C8C",
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        show: true,
                        interval: "auto",
                        //formatter: "{value}%",
                        textStyle: {
                            color: "#8C8C8C",
                        }
                    },
                    axisLine: {
                        show: false,

                        lineStyle: {
                            color: '#8C8C8C',  //坐标轴的颜色
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            //show: false,
                            type: 'dashed',
                            color: '#DFDFDF',
                        }
                    },
                    // axisLabel: {
                    //   formatter: '{value} ml'
                    // }
                }],
                series: [
                    {
                        data: [300, 200, 400, 350, 250],
                        type: 'bar',
                        barWidth: 20,
                    },
                ]
            },
            jinpopt: {
                color: '#6474FF',
                // title: {
                //     text: '渠道分布',
                //     textStyle: {
                //         fontFamily: 'HarmonyOS_Sans_SC_Medium',
                //         fontSize: 18,
                //         color: '#333333',
                //         fontWeight: 'normal'
                //     }
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                // label: {
                //     show: true,
                //     position: 'top'
                // },
                // legend: { y: 'bottom', data: ['销量', '牌面位', '卖力'] },
                grid: {
                    left: '10%',
                    right: '0%',
                    bottom: '13%',
                    top: '20%'
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['汽水', '水类', '奶类', '功能', '果汁'],
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#8C8C8C',  //坐标轴的颜色
                        },
                    },
                    axisLabel: {//x轴文字的配置
                        show: true,
                        textStyle: {
                            color: "#8C8C8C",
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        show: true,
                        interval: "auto",
                        //formatter: "{value}%",
                        textStyle: {
                            color: "#8C8C8C",
                        }
                    },
                    axisLine: {
                        show: false,

                        lineStyle: {
                            color: '#8C8C8C',  //坐标轴的颜色
                        },
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            //show: false,
                            type: 'dashed',
                            color: '#DFDFDF',
                        }
                    },
                    // axisLabel: {
                    //   formatter: '{value} ml'
                    // }
                }],
                series: [
                    {
                        data: [300, 200, 400, 350, 250],
                        type: 'bar',
                        barWidth: 20,
                    },
                ]
            },
        }
    },
    mounted() {
        // console.log(this.$store.state.user)
        // if (this.$store.state.user.level === 1) {
        //     if (this.$store.state.user.name === 'admin') {
        //         this.isAdmin = true
        //         this.form.userId = this.$store.state.user.id
        //         this.searchForm.userId = this.$store.state.user.id
        //         this.oneLevelUserChangeSearch()
        //         this.showOneLevel = false
        //     } else {
        //         console.log("yingjia进入")
        //         this.form.userId = this.$store.state.user.id
        //         console.log("yingjia进入", this.form.userId)
        //         this.searchForm.userId = this.$store.state.user.id
        //         this.oneLevelUserChangeSearch()
        //         this.showOneLevel = true
        //     }
        // }
        // this.loadPrivinceData() // 加载省份数据


        //this.loading = true
        //Promise.all([this.getList()]).finally(() => (this.loading = false))
        // this.getList()
        // listCustomer().then((res) => {
        //     this.initCustomer = res.data.data
        //     console.log('### listCustomer ==>', res)
        //     //this.syncSkuForm.SrcUserId = this.initCustomer[0].id
        // })
    },
    watch: {
        chooseValue() {
            const text = this.infoText()
            this.showText = text
        },
    },
    beforeDestroy() {

    },
    methods: {
        getList() {
            // let bingdingUserId
            // //绑定要查找的用户id
            // // console.log(this.searchForm)
            // // if (this.searchForm.threeUserId != '') {
            // //     bingdingUserId = this.searchForm.threeUserId
            // // } else if (this.searchForm.twoUserId != '') {
            // //     bingdingUserId = this.searchForm.twoUserId
            // // } else {
            // //     bingdingUserId = this.searchForm.userId
            // // }
            // console.log("bingdingUserId:", this.$store.state.user.id)
            // const params = {
            //     pageIndex: this.pageNum - 1,
            //     pageSize: this.pageSize,
            //     //userId: bingdingUserId,
            //     skuName: this.searchForm.skuName,
            //     userId: this.$store.state.user.id
            // }
            // this.loading = true
            // const req = getUserSKUList(params)
            //     .then((res) => {
            //         if (res && res.data) {
            //             console.log(res)
            //             this.list = res.data.data
            //             this.total = res.data.totalCount
            //         }
            //     })
            //     .finally(() => {
            //         this.loading = false
            //     })
            // return req
        },
        //一级用户选择
        oneLevelUserChange() {
            // this.form.twoUserId = ''
            // this.form.threeUserId = ''
            // this.threeLevelUserList = []
            // let that = this
            // console.log("一级用户id", that.form.userId)
            // //根据一级用户id查询二级用户列表
            // userListSon({ userId: that.form.userId }).then((res) => {
            //     if (res.data != '') {
            //         console.log("二级用户数据", res.data)
            //         that.twoLevelUserList = res.data
            //         that.showTwoLevel = false
            //     } else {
            //         that.twoLevelUserList = ''
            //         that.showTwoLevel = true
            //     }
            // }).catch((err) => {
            //     console.log('## err ==> ', err)
            // })
            // that.$forceUpdate();
        },
        //二级用户选择
        twoLevelUserChange() {
            // this.form.threeUserId = ''
            // this.threeLevelUserList = []
            // // console.log("一级用户选择",this.form.userId)
            // console.log("二级用户选择", this.form.twoUserId)
            // let that = this
            // userListSon({ userId: that.form.twoUserId }).then((res) => {
            //     if (res.data != '') {
            //         console.log("三级用户数据", res.data)
            //         that.threeLevelUserList = res.data
            //         that.showThreeLevel = false
            //     } else {
            //         that.threeLevelUserList = ''
            //     }
            // }).catch((err) => {
            //     console.log('## err ==> ', err)
            // })
            // that.$forceUpdate();
        },
        //修改框-调用一下userListson方法
        oneLevelUserChangeEdit() {
            // // this.form.twoUserId=''
            // let that = this
            // console.log("一级用户id", that.form.userId)
            // //根据一级用户id查询二级用户列表
            // userListSon({ userId: that.form.userId }).then((res) => {
            //     if (res.data != '') {
            //         console.log("二级用户数据", res.data)
            //         that.twoLevelUserList = res.data
            //         that.showTwoLevel = false
            //     } else {
            //         that.showTwoLevel = true
            //     }
            // }).catch((err) => {
            //     console.log('## err ==> ', err)
            // })
            // that.$forceUpdate();
        },
        //修改框-调用一下userListson方法
        twoLevelUserChangeEdit() {
            // // this.form.threeUserId=''
            // // console.log("一级用户选择",this.form.userId)
            // console.log("二级用户选择", this.form.twoUserId)
            // let that = this
            // userListSon({ userId: that.form.twoUserId }).then((res) => {
            //     if (res.data != '') {
            //         console.log("三级用户数据", res.data)
            //         that.threeLevelUserList = res.data
            //         that.showThreeLevel = false
            //     }
            // }).catch((err) => {
            //     console.log('## err ==> ', err)
            // })
            // that.$forceUpdate();
        },
        regionQueryChange(e) {
            this.$forceUpdate()
        },
        cityQueryChange(e) {
            // //初始化数据
            // this.regionList = []
            // this.searchForm.regionValue = ''
            // if (this.searchForm.cityValue != '' || this.searchForm.cityValue === 0) {
            //     var i = 0
            //     this.regionList = AllAddress[this.searchForm.provinceValue].city[this.searchForm.cityValue].county.map(obj => {
            //         return {
            //             value: i++,
            //             text: obj.countyName,
            //         }
            //     })
            // }
            // this.$forceUpdate()
        },
        provinceQueryChange(e) {
            //初始化数据
            this.cityList = []
            this.searchForm.cityValue = ''
            this.regionList = []
            this.searchForm.regionValue = ''
            if (this.searchForm.provinceValue != '' || this.searchForm.provinceValue === 0) {
                //获取市数据
                var i = 0
                this.cityList = AllAddress[this.searchForm.provinceValue].city.map(obj => {
                    return {
                        value: i++,
                        text: obj.cityName,
                    }
                })
            }
            this.$forceUpdate()
        },
        provinceChange(e) {
            //初始化数据
            this.cityList = []
            this.city = ''
            this.form.cityValue = ''
            this.regionList = []
            this.region = ''
            this.form.regionValue = ''
            if (this.form.provinceValue != '' || this.form.provinceValue === 0) {
                this.province = this.provinceList[this.form.provinceValue].text
                //获取市数据
                var i = 0
                this.cityList = AllAddress[this.form.provinceValue].city.map(obj => {
                    return {
                        value: i++,
                        text: obj.cityName,
                    }
                })
            } else {
                this.province = ''
            }
            this.$forceUpdate()
        },
        //省份数据加载
        loadPrivinceData() {
            var i = 0
            this.provinceList = AllAddress.map(obj => {
                return {
                    value: i++,
                    text: obj.provinceName,
                }
            })
        },
        regionchange(e) {
            if (this.form.regionValue != '' || this.form.regionValue === 0) {
                this.region = this.regionList[this.form.regionValue].text
                this.$forceUpdate()
            } else {
                this.region = ''
            }
        },
        cityChange(e) {
            //初始化数据
            this.regionList = []
            this.region = ''
            this.form.regionValue = ''
            if (this.form.cityValue != '' || this.form.cityValue === 0) {
                this.city = this.cityList[this.form.cityValue].text
                var i = 0
                this.regionList = AllAddress[this.form.provinceValue].city[this.form.cityValue].county.map(obj => {
                    return {
                        value: i++,
                        text: obj.countyName,
                    }
                })
            } else {
                this.city = ''
            }
            this.$forceUpdate()
        },
        oneLevelUserChangeSearch() {
            this.searchForm.twoUserId = ''
            this.searchForm.threeUserId = ''
            this.showTwoLevel = true
            this.showThreeLevel = true
            let that = this
            console.log("搜索、一级用户id", that.searchForm.userId)
            //根据一级用户id查询二级用户列表
            userListSon({ userId: that.searchForm.userId }).then((res) => {
                if (res.data != '') {
                    console.log("搜索、二级用户数据", res.data)
                    that.twoLevelUserListSearch = res.data
                    //选了一级用户 并且这个一级用户有二级子用户的话 
                    that.showTwoLevel = false
                }
            }).catch((err) => {
                console.log('## err ==> ', err)
            })
            that.$forceUpdate();
        },
        //搜索二级用户选择
        twoLevelUserChangeSearch() {
            this.searchForm.threeUserId = ''
            this.showThreeLevel = true
            console.log("搜索、二级用户选择", this.searchForm.twoUserId)

            let that = this
            userListSon({ userId: that.searchForm.twoUserId }).then((res) => {
                if (res.data != '') {
                    console.log("搜索、三级用户数据", res.data)
                    that.threeLevelUserListSearch = res.data
                    that.showThreeLevel = false
                }
            }).catch((err) => {
                console.log('## err ==> ', err)
            })
            //点击完option后出现label值没有渲染到select框的问题，强制刷新一次
            that.$forceUpdate();
        },
        //搜索框三级用户选择
        threeLevelUserChangeSearch() {
            console.log("搜索、三级用户选择", this.searchForm.threeUserId)
            this.$forceUpdate();
        },
        handFileChange(e) {
            console.log(e)
            let fileData = e.target.files[0] //这是我们上传的文件
            console.log('@@ ee => ', fileData)
            // this.algoForm.algMainImg = fileData
            let url = URL.createObjectURL(fileData)
            this.skuImgUrl = url
            this.form.file = fileData
            console.log(this.form)
        },
        clearSearchingForm() {
            this.searchingForm.skuId = '',
                this.searchingForm.skuName = '',
                this.queryBySearchingForm()
        },
        queryBySearchingForm() {
            // const params = {
            //     skuId: this.searchingForm.skuId,
            //     skuName: this.searchingForm.skuName,
            //     pageIndex: 0,
            //     pageSize: this.alogPagn.pageSize,
            //     layer: 0
            // }
            // console.log(params)
            // this.bindLoading = true
            // getAlgListV4(params).then((res) => {
            //     const { data, pageIndex, totalCount } = res.data || {}
            //     this.alogData = data
            //     this.alogPagn = {
            //         total: totalCount
            //     }
            //     console.log('## 检索结果为 ==>', res)
            // })
            //     .finally(() => {
            //         this.bindLoading = false
            //     })
        },
        commonFormat(row, column, cellValue, index) {
            // console.log('## row, column cellValue index', row, column, cellValue, index)
            return !cellValue && cellValue !== 0 ? '-' : cellValue
        },
        confirmBind() {
            // if (this.chooseValue) {
            //     //清除检索框的数值
            //     this.searchingForm.skuId = ''
            //     this.searchingForm.skuName = ''
            //     // todos modal关闭的时候清空 chooseValue
            //     console.log("选中值", this.chooseValue)
            //     const chooseItem = this.getBindDataById(this.chooseValue)
            //     console.log("选中项", chooseItem)
            //     const params =
            //     {
            //         algSkuId: chooseItem.skuId,
            //         algSkuName: chooseItem.skuName,
            //         userSkuId: this.bindRow.id,
            //     }
            //     this.bindLoading = true
            //     algBindV4(params)
            //         .then((res) => {
            //             this.$message.success("算法绑定成功！")
            //             console.log('## 绑定成功 ==>', res)
            //             this.bindVisible = false
            //             this.pagination()
            //         })
            //         .catch((err) => {
            //             if (err.code === 1) {
            //                 if (err.message == 'SKU未注册完整') {
            //                     this.$message("三层算法未注册完整，请检查")
            //                 } else {
            //                     this.$message(err.message)
            //                 }

            //             }
            //         })
            //         .finally(() => {
            //             this.bindLoading = false
            //         })
            // } else {
            //     this.$message.error('请选择绑定sku')
            // }
        },

        infoText() {
            const ret = this.getBindDataById(this.chooseValue) || {}
            return `选择绑定sku: ${ret.skuName || '-'}`
        },
        // 通过Id查询整条数据
        getBindDataById(id) {
            console.log('## ', id, this.alogData)
            return this.alogData.find((item) => item.skuId === id)
        },
        pagination() {
            this.loading = true
            this.getList().finally(() => (this.loading = false))
        },
        handleAdd() {
            this.dialogTitle = '新增SKU'
            this.dialogOpen = true
            if (this.$store.state.user.level === 1) {
                this.form.userId = this.$store.state.user.id
                this.oneLevelUserChange()
                this.FormOneLevel = false
            } else if (this.$store.state.user.level === 2) {
                this.form.twoUserId = this.$store.state.user.id
                this.twoLevelUserChange()
                this.FormOneLevel = true
                this.FormTwoLevel = false
                this.FormThreeLevel = false
            } else {
                this.form.twoUserId = this.$store.state.user.id
                this.twoLevelUserChange()
                this.FormOneLevel = true
                this.FormTwoLevel = true
                this.FormTwoLevel = false
            }
        },
        formateTime(time) {
            return moment(time).format('YYYY-MM-DD HH:mm:ss')
        },
         submitForm() {
        //     this.$refs.form.validate((valid) => {
        //         if (!valid) return
        //         // todos 添加loading

        //         if (this.form.classify !== 0) {
        //             this.form.biPuPin = false
        //         }
        //         let bingdingUserId
        //         //绑定要查找的用户id  
        //         console.log(this.form)
        //         if (this.form.threeUserId != '') {
        //             bingdingUserId = this.form.threeUserId
        //         } else if (this.form.twoUserId != '') {
        //             bingdingUserId = this.form.twoUserId
        //         } else {
        //             bingdingUserId = this.form.userId
        //         }
        //         const form =
        //         {
        //             skuId: this.form.skuId, //	string allowEmptyValue: false 商品唯一标识，不可修改
        //             skuName: this.form.skuName, //	string allowEmptyValue: false 商品名称
        //             userId: bingdingUserId, //integer($int64) allowEmptyValue: false 请先选择要添加的商户：用户的数据表ID
        //             file: this.form.file,
        //             classify: this.form.classify, //产品品类 0本品 1竞品 2他品
        //             biPuPin: this.form.biPuPin,//默认不是必铺品 true是 false不是
        //             id: this.form.id,//选中行的id
        //         }

        //         // this.form.imageUrl=''

        //         let str = ''
        //         Object.keys(form).forEach((key) => {
        //             if (key !== 'file') {
        //                 str += `&${key}=${form[key]}`
        //             }
        //         })
        //         const formData = new FormData()


        //         this.loading = true
        //         if (this.editRow) {
        //             if (this.form.file != '') {
        //                 console.log("图片修改比对")
        //                 console.log(form.file)
        //                 console.log(this.fetchFile(this.form.imageUrl))
        //                 formData.append('file', form.file)
        //                 const params = {
        //                     url: str,
        //                     file: formData
        //                 }
        //                 modifySKUV2(params)
        //                     .then((res) => {
        //                         this.getList()
        //                         this.$message.success('修改SKU成功')
        //                         this.cancel()
        //                     })
        //                     .catch((err) => {
        //                         console.log(err)
        //                         this.$message.error(err.message || '修改SKU失败')
        //                     })
        //                     .finally(() => {
        //                         this.loading = false
        //                     })
        //             } else {
        //                 formData.append('file', this.fetchFile(this.form.imageUrl))
        //                 // formData=this.fetchFile(this.form.imageUrl)
        //                 const params = {
        //                     url: str
        //                 }
        //                 modifySKUV2NoFile(params)
        //                     .then((res) => {
        //                         this.getList()
        //                         this.$message.success('修改SKU成功')
        //                         this.cancel()
        //                     })
        //                     .catch((err) => {
        //                         console.log(err)
        //                         this.$message.error(err.message || '修改SKU失败')
        //                     })
        //                     .finally(() => {
        //                         this.loading = false
        //                     })
        //             }



        //         } else {
        //             formData.append('file', form.file)
        //             const params = {
        //                 url: str,
        //                 file: formData
        //             }
        //             addSKUV2(params)
        //                 .then((res) => {
        //                     this.getList()
        //                     this.$message.success('添加SKU成功')
        //                     this.cancel()
        //                 })
        //                 .catch((err) => {
        //                     console.log(err)
        //                     this.$message.error(err.message || '添加SKU失败')
        //                 })
        //                 .finally(() => {
        //                     this.loading = false
        //                 })
        //         }
        //     })
        },
        fetchFile(url, fileName) {
            fetch(url)
                .then((response) => response.blob())
                .then((blob) => {

                    //将blob对象转换为file并返回
                    return new new File([blob], fileName, { type: blob.type, lastModified: Date.now() });
                })
        },
        cancel() {
            this.editRow = null
            this.dialogOpen = false
            // this.form={}
            this.form.skuId = ''
            this.form.skuName = ''
            this.form.imageUrl = ''
            this.form.userId = 0
            this.form.classify = 0
            this.form.biPuPin = true
            this.form.file = ''
            this.form.id = ''
            this.skuImgUrl = ''
        },

        handldBefore(file) {
            console.log("上船前", file)
            let fileName = file.uid + file.name    // 如果可以上传多个文件，这里需要用fileList.forEach()处理
            let f = new File([file.raw], fileName);
            f.uid = file.uid; // new File 没有uid属性，会导致组件底层报错，这里手动加上
            // file.raw = f;  // 用f替换file的数据
            file = f
            // file.name=f.name

            // this.$refs.upload.submit(); // 手动触发上传

            console.log("处理后的文件名", file)
            // handleUploadSuccess()

            //  console.log("上船前",file)
            //  file.name=file + file.uid

            //  const littleName = file.name + file.uid
            //  const copyFile = new File([file], littleName)
            //  file=copyFile

            //  console.log(file)
            return true
        },
        handleChange(file) {
            console.log("文件改变change", file)
            console.log("上船前", file)
            let fileName = file.uid + file.name    // 如果可以上传多个文件，这里需要用fileList.forEach()处理
            let f = new File([file.raw], fileName);
            f.uid = file.uid; // new File 没有uid属性，会导致组件底层报错，这里手动加上
            // file.raw = f;  // 用f替换file的数据
            file = f
            // file.name=f.name
            if (file.response.success) {
                // this.form.imageUrl = URL.createObjectURL(file.raw);
                this.form.imageUrl = file.response?.data
                console.log(this.form.imageUrl)
            } else {
                // this.$message.error(file.response.message || '上传图片失败')
                this.$message.error(file.response.message || '上传图片失败')
            }

            // this.$refs.upload.submit(); // 手动触发上传
            console.log("处理后的文件名", file)
        },
        handleUploadSuccess(response, file, fileList) {
            console.log(file)
            console.log('## response ==>', response)
            if (response.success) {
                // this.form.imageUrl = URL.createObjectURL(file.raw);
                this.form.imageUrl = response?.data
                console.log(this.form.imageUrl)
            } else {
                // this.$message.error(file.response.message || '上传图片失败')
                this.$message.error(response.message || '上传图片失败')
            }
        },
        handleUploadError(err, file, fileList) {
            console.log('## handleUploadError', err)
            this.$message.error(err.message || '上传图片失败')
        },
        /** 查询 */
        getList(obj) {
            let bingdingUserId
            //绑定要查找的用户id
            console.log(this.searchForm)
            if (this.searchForm.threeUserId != '') {
                bingdingUserId = this.searchForm.threeUserId
            } else if (this.searchForm.twoUserId != '') {
                bingdingUserId = this.searchForm.twoUserId
            } else {
                bingdingUserId = this.searchForm.userId
            }
            console.log("bingdingUserId:", bingdingUserId)
            const params = {
                pageIndex: this.pageNum - 1,
                pageSize: this.pageSize,
                userId: bingdingUserId,
                skuName: this.searchForm.skuName
                // userId: this.$store.state.user.id
            }
            this.loading = true
            const req = getUserSKUList(params)
                .then((res) => {
                    if (res && res.data) {
                        console.log(res)
                        this.list = res.data.data
                        this.total = res.data.totalCount
                    }
                })
                .finally(() => {
                    this.loading = false
                })
            return req
        },
        // 条件查询
        queryByForm() {
            const params = {
                ...this.searchForm,
                pageIndex: 0,
            }
            console.log('## skuName ==>', params, this.searchForm)
            this.getList(params)
        },
        /** 搜索按钮操作 */
        handleQuery() {
            if (this.total > this.pageNum * this.pageSize) {
                this.pageNum += 1
                this.getList()
            }
        },
        /**
         * 修改SKU
         * @param {Object} row
         */
        handleEdit(row) {
            // console.log('## 选中行数据为 ==>', row)
            // this.editRow = row
            // if (row.user.level === 1) {
            //     this.form.skuId = row.skuId
            //     this.form.skuName = row.skuName
            //     this.form.imageUrl = row.imageUrl
            //     this.form.classify = row.classify
            //     this.form.biPuPin = row.biPuPin
            //     this.form.userId = row.user?.id
            //     this.skuImgUrl = row.imageUrl
            //     this.form.id = row.id
            //     this.oneLevelUserChange()
            // } else if (row.user.level === 2) {
            //     //二级
            //     this.form.skuId = row.skuId
            //     this.form.skuName = row.skuName
            //     this.form.imageUrl = row.imageUrl
            //     this.form.classify = row.classify
            //     this.form.biPuPin = row.biPuPin
            //     this.form.twoUserId = row.user?.id
            //     this.skuImgUrl = row.imageUrl
            //     this.form.id = row.id

            //     getDadInfoByUserId({ userId: this.form.twoUserId }).then((res) => {
            //         //父用户（一级用户、品牌）赋值
            //         console.log(res)
            //         this.form.userId = res.data.id
            //         this.oneLevelUserChangeEdit()
            //     }).catch((err) => {
            //         console.log('## err ==> ', err)
            //     })
            //     this.twoLevelUserChange()
            // } else if (row.user.level === 3) {
            //     //三级
            //     this.form.skuId = row.skuId
            //     this.form.skuName = row.skuName
            //     this.form.imageUrl = row.imageUrl
            //     this.form.classify = row.classify
            //     this.form.biPuPin = row.biPuPin
            //     this.form.threeUserId = row.user?.id
            //     this.skuImgUrl = row.imageUrl
            //     this.form.id = row.id

            //     getDadInfoByUserId({ userId: this.form.threeUserId }).then((res) => {
            //         //父用户（二级用户、品牌）赋值
            //         console.log("//父用户（二级用户、品牌）赋值", res)
            //         this.form.twoUserId = res.data.id
            //     }).catch((err) => {
            //         console.log('## err ==> ', err)
            //     }).then(() => {
            //         getDadInfoByUserId({ userId: this.form.twoUserId }).then((res) => {
            //             //父用户（一级用户、品牌）赋值
            //             console.log(res)
            //             this.form.userId = res.data.id
            //             console.log(this.form)
            //             this.oneLevelUserChangeEdit()
            //             this.twoLevelUserChangeEdit()
            //         }).catch((err) => {
            //             console.log('## err ==> ', err)
            //         })
            //     })
            // }

            // this.dialogOpen = true
            // this.dialogTitle = '修改SKU'
        },
        // 绑定算法sku
        handleBind(row) {
            this.bindRow = row
            if (this.bindRow.v4SkuName !== null) {
                this.$message("当前暂未开放换绑功能，请先解绑再绑定！")
                return
            }
            this.searchingForm.skuId = ''
            this.searchingForm.skuName = ''
            this.bindVisible = true
            this.getAlgoData()
            this.getSearAlgoData()
        },
        handleSelectionChange(val) {
            console.log('## handleSelectionChange ==>', val)
        },
        aloGpagination(value) {
            console.log('## value ==>', value)
            this.getAlgoData({ pageIndex: value.page - 1, pageSize: value.limit })
        },
        //绑定算法搜索框-初始化
        getSearAlgoData() {
            const params = {
                pageIndex: 0,
                pageSize: 10000,
                layer: 0
            }
            this.bindLoading = true
            getAlgListV4(params)
                .then((res) => {
                    const { data, pageIndex, totalCount } = res.data || {}
                    this.searData = data
                    console.log("searchData", this.searData)
                    for (var i = 0; i < this.searData.length; i++) {
                        if (this.skuNameList.indexOf(this.searData[i].skuName) === -1) {
                            this.skuNameList.push(this.searData[i].skuName)
                        }
                    }
                    console.log("商品名称列表", this.skuNameList)

                    this.alogPagn = {
                        pageNum: pageIndex + 1,
                        total: totalCount,
                    }
                    console.log('## loading ==> ', res)
                })
                .finally(() => {
                    this.bindLoading = false
                })
        },
        getAlgoData(obj = {}) {
            const params = {
                pageIndex: 0,
                pageSize: obj.pageSize,
                layer: 0,
                ...obj,
            }
            this.bindLoading = true
            getAlgListV4(params).then((res) => {
                const { data, pageIndex, totalCount } = res.data || {}
                this.alogData = data
                this.alogPagn = {
                    pageNum: pageIndex + 1,
                    total: totalCount,
                }
                console.log('## loading ==> ', res)
            })
                .finally(() => {
                    this.bindLoading = false
                })
        },
        handleCancelBind(row) {
            // console.log("解除绑定", row)
            // if (row.v4SkuName === null) {
            //     this.$message.error("该SKU并未绑定V4算法")
            //     return
            // }
            // const params = {
            //     algSkuName: row.v4SkuName,
            //     userSkuId: row.id
            // }
            // algUnBindV4(params).then((res) => {
            //     this.$message.success("解绑成功！")
            //     // this.getList()
            //     this.pagination()
            //     console.log(res)
            // }).catch((err) => {
            //     if (err.code === 1) {
            //         this.$message.error(err.message)
            //     }

            // })

        },
        handleDel(row) {
            this.delRow = row
            this.deleteVisible = true
        },
        /** 删除按钮 */
        deleteSKU() {
            // let row = this.delRow
            // //删除前判断是否有绑定
            // if (row.v4SkuName !== null) {
            //     const params = {
            //         algSkuName: row.v4SkuName,
            //         userSkuId: row.id
            //     }
            //     algUnBindV4(params).then((res) => {
            //         console.log("解绑", res)
            //         if (res.code === 0) {
            //             console.log("解绑成功")
            //             this.loading = true
            //             delSKU({ id: String(row.id) })
            //                 .then((res) => {
            //                     this.getList()
            //                     this.$message.success('SKU删除成功')
            //                 })
            //                 .catch((err) => {
            //                     this.$message.error(err.message || 'SKU删除失败')
            //                 })
            //                 .finally(() => {
            //                     this.loading = false
            //                     this.deleteVisible = false
            //                 })
            //         }
            //         // this.$message.success("解绑成功！")
            //         // // this.getList()
            //         // this.pagination()
            //         // console.log(res)
            //     }).catch((err) => {
            //         if (err.code === 1) {
            //             this.$message.error(err.message)
            //         }
            //     })
            // } else {
            //     this.loading = true
            //     delSKU({ id: String(row.id) })
            //         .then((res) => {
            //             this.getList()
            //             this.$message.success('SKU删除成功')
            //         })
            //         .catch((err) => {
            //             this.$message.error(err.message || 'SKU删除失败')
            //         })
            //         .finally(() => {
            //             this.loading = false
            //             this.deleteVisible = false
            //         })
            // }


        },
        analyzeData() {
            this.analyzeOpen = true;
            setTimeout(() => {

                var chartDom = document.getElementById('chart1')
                var jinpoptChart = this.$echarts.init(chartDom)
                jinpoptChart.setOption(this.jinpopt)
                var chartDom = document.getElementById('chart2')
                var BenpoptChart = this.$echarts.init(chartDom)
                BenpoptChart.setOption(this.Benpopt)
                window.onresize = () => {
                    jinpoptChart.resize()
                    BenpoptChart.resize()
                }
            }, 500);

        },
        handleAdd() {
            this.dialogTitle = '新增SKU'
            this.dialogOpen = true
            // if (this.$store.state.user.level === 1) {
            //     this.form.userId = this.$store.state.user.id
            //     this.oneLevelUserChange()
            //     this.FormOneLevel = false
            // } else if (this.$store.state.user.level === 2) {
            //     this.form.twoUserId = this.$store.state.user.id
            //     this.twoLevelUserChange()
            //     this.FormOneLevel = true
            //     this.FormTwoLevel = false
            //     this.FormThreeLevel = false
            // } else {
            //     this.form.twoUserId = this.$store.state.user.id
            //     this.twoLevelUserChange()
            //     this.FormOneLevel = true
            //     this.FormTwoLevel = true
            //     this.FormTwoLevel = false
            // }
        },
        pagination() {
            this.loading = true
            this.getList().finally(() => (this.loading = false))
        },
        batchImport() {
            this.batchImportOpen = true
        },
        handleClick() {
        },
        cancel() {
            this.modifyDrawer = false
            this.dialogOpen = false
        },
        handleCheckChange(node) {
            console.log('node', node.id);
            console.log('this.checkedMore', this.checkedMore);

            if (this.checkedMore.includes(node.id)) {
                this.partUpdateList.map((e, index) => {
                    if (e == node.label) {
                        console.log('index', index);
                        this.partUpdateList.splice(index, 1)
                    }
                })
                this.checkedMore.splice(this.checkedMore.indexOf(node.id), 1)
            } else {
                this.partUpdateList.push(node.label)
                this.checkedMore.push(node.id)
            }


            // if(data.checked){ ///???如何过去选中状态
            //     console.log('data', data);
            // this.partUpdateList.push(data.label)
            // }else{
            //     this.partUpdateList.splice(1, 1)
            // }

        },
        del(item) {
            console.log('item', item);
            this.partUpdateList.map((e, index) => {
                if (e == item) {
                    console.log('index', index);
                    this.partUpdateList.splice(index, 1)
                }
            })
            //this.partUpdateList.splice(id,1)
        }

    }
}
</script>

<style lang="scss" scoped>
.data-center-main {
    background-color: #F3F3F3;
    width: 100%;
    height: calc(100vh - 85px);
    display: flex;
    padding: 1%;
}

.container {
    width: 100%;
    height: 100%;
    background-color: white;
    //padding:15px
}

.top {
    width: 100%;
    height: 10%;
    border-bottom: 1px solid #E8E8E8;
    //border: solid 1px red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #D7D7D7;
}

.left {
    width: 20%;
    height: 90%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-right: 1px solid #D7D7D7;
    // border-top: 1px solid #D7D7D7;
}

::v-deep .el-tree>.el-tree-node>.el-tree-node__content {
    background-color: #5B6BF4 8%;
}

//树形结构一级背景
.right {
    width: 79%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.right-top {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #D7D7D7;
    padding-left: 15px;
}

// ::v-deep .betchUpload.el-dialog__header {
//     padding: 0px;
// }

// ::v-deep .betchUpload.el-dialog__body {
//     padding: 1 20px;
// }

::v-deep .el-upload {
    display: flex;
    text-align: center;
    cursor: pointer;
    outline: none;
    justify-content: center;
    align-items: center;
}

::v-deep .el-upload--picture-card {
    background-color: white // border: 1px dashed #c0ccda;
}

::v-deep .el-drawer__header {
    background-color: #7E8EFF;
    color: white;
    display: flex;
    margin-bottom: 32px;
    padding: 20px;
    padding-bottom: 20px;
    align-items: center;
    font-family: 'HarmonyOS_Sans_SC_Regular'
}

.download {
    width: 500px;
    height: 60px;
    background-color: rgba(91, 107, 244, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px
}

.group {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'HarmonyOS_Sans_SC_Regular'
}

.group>div {
    width: 25%;
    height: 36px;
    background: rgba(91, 107, 244, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.page {
    display: flex;
    height: 80px;
    width: 100%;
    justify-content: center;
    align-items: center;
    box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.02);
    bottom: 10px;
    position: absolute;
}

.pageborder {
    margin-right: 10px;
    border: 1px solid #dcdfe6;
    width: 40px;
    height: 36px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    font-family: 'HarmonyOS_Sans_SC_Regular'
}

#chart1 {
    width: 100%;
    height: 300px
}

#chart2 {
    width: 100%;
    height: 300px
}

.charttitle {
    font-family: 'HarmonyOS_Sans_SC_Regular';
    font-size: 18px;
}



::v-deep .el-input__inner::-webkit-outer-spin-button,

::v-deep .el-input__inner::-webkit-inner-spin-button {

    -webkit-appearance: none;
}

::v-deep .el-input__inner[type='number'] {
    -moz-appearance: textfield;
}
</style>